<template>
  <div class="model">
    <h2>模板管理</h2>
    <h3>
      轮播图配置<i
        class="el-icon-circle-plus-outline"
        @click="setCarouselList"
      ></i>
    </h3>
    <el-table :data="json.carouselList" height="400" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="titleCn" label="titleCn"> </el-table-column>
      <el-table-column prop="titleEn" label="titleEn"> </el-table-column>
      <el-table-column prop="subtitle" label="subtitle"> </el-table-column>
      <el-table-column label="Web图片">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" :src="scope.row.imgWeb" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="App图片">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" :src="scope.row.imgApp" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditCarousel(scope.$index, scope.row, 'Web')"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteCarousel(scope.$index, 'Web')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <h3>
      首页四张图-WEB
    </h3>
    <el-table :data="json.homeFourBlock" height="400" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="titleCn" label="titleCn"> </el-table-column>
      <el-table-column prop="titleEn" label="titleEn"> </el-table-column>
      <el-table-column prop="subtitle" label="subtitle"> </el-table-column>
      <el-table-column prop="path" label="path"> </el-table-column>
      <el-table-column label="Web图片">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.imgWeb" :src="scope.row.imgWeb" alt="" />
          <span v-if="!scope.row.imgWeb">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="App图片">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.imgApp" :src="scope.row.imgApp" alt="" />
          <span v-if="!scope.row.imgApp">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditFour(scope.$index, scope.row, 'Web')"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <h3>
      导航-无人运载装备
    </h3>
    <el-table :data="json.TopBarWR" height="400" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="title" label="title"> </el-table-column>
      <el-table-column prop="desc" label="desc"> </el-table-column>
      <el-table-column prop="model" label="model"> </el-table-column>
      <el-table-column prop="path" label="path"> </el-table-column>
      <el-table-column label="菜单图片">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.img" :src="scope.row.img" alt="" />
          <span v-if="!scope.row.img">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="产品图片Web">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.pathImgWeb" :src="scope.row.pathImgWeb" alt="" />
          <span v-if="!scope.row.pathImgWeb">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column prop="pathTitle" label="App主标题"> </el-table-column>
      <el-table-column prop="pathSubtitle" label="App副标题"> </el-table-column>
      <el-table-column label="产品图片App">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.pathImgApp" :src="scope.row.pathImgApp" alt="" />
          <span v-if="!scope.row.pathImgApp">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleTopBarWR(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <h3>
      导航-感知监测装备
    </h3>
    <el-table :data="json.TopBarGZ" height="400" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="title" label="title"> </el-table-column>
      <el-table-column prop="desc" label="desc"> </el-table-column>
      <el-table-column prop="model" label="model"> </el-table-column>
      <el-table-column prop="path" label="path"> </el-table-column>
      <el-table-column label="菜单图片">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.img" :src="scope.row.img" alt="" />
          <span v-if="!scope.row.img">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="产品图片Web">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.pathImgWeb" :src="scope.row.pathImgWeb" alt="" />
          <span v-if="!scope.row.pathImgWeb">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column prop="pathTitle" label="App主标题"> </el-table-column>
      <el-table-column prop="pathSubtitle" label="App副标题"> </el-table-column>
      <el-table-column label="产品图片App">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.pathImgApp" :src="scope.row.pathImgApp" alt="" />
          <span v-if="!scope.row.pathImgApp">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleTopBarGZ(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <h3>
      导航-行业应用<i
        class="el-icon-circle-plus-outline"
        @click="addApp"
      ></i>
    </h3>
    <el-table :data="json.TopBarApplication" height="400" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="title" label="title"> </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" v-if="scope.row.img" :src="scope.row.img" alt="" />
          <span v-if="!scope.row.img">暂未配置</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleTopBarApplication(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteTopBarApplication(scope.$index)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    
    <el-dialog
      title="配置"
      :visible.sync="CarouselListWebVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="carouselListForm"
        :rules="formRule"
        ref="carousel"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="titleCn" prop="titleCn">
          <el-input v-model="carouselListForm.titleCn"></el-input>
        </el-form-item>
        <el-form-item label="titleEn" prop="titleEn">
          <el-input v-model="carouselListForm.titleEn"></el-input>
        </el-form-item>
        <el-form-item label="subtitle" prop="subtitle">
          <el-input v-model="carouselListForm.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="Web图片" prop="imgWeb">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessWeb"
          >
            <img
              v-if="carouselListForm.imgWeb"
              :src="carouselListForm.imgWeb"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="App图片" prop="imgApp">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessApp"
          >
            <img
              v-if="carouselListForm.imgApp"
              :src="carouselListForm.imgApp"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="CarouselListWebVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveCarouselList">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="配置"
      :visible.sync="FourBlockVisible"
      width="30%"
      :before-close="handleClose2"
    >
      <el-form
        :model="fourForm"
        :rules="formRule"
        ref="four"
        label-width="100px"
      >
        <el-form-item label="titleCn" prop="titleCn">
          <el-input v-model="fourForm.titleCn"></el-input>
        </el-form-item>
        <el-form-item label="titleEn" prop="titleEn">
          <el-input v-model="fourForm.titleEn"></el-input>
        </el-form-item>
        <el-form-item label="subtitle" prop="subtitle">
          <el-input v-model="fourForm.subtitle"></el-input>
        </el-form-item>
        <el-form-item label="path" prop="path">
          <el-input disabled v-model="fourForm.path"></el-input>
        </el-form-item>
        <el-form-item label="Web图片" prop="imgWeb">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessFourWeb"
          >
            <img
              v-if="fourForm.imgWeb"
              :src="fourForm.imgWeb"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="App图片" prop="imgApp">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessFourApp"
          >
            <img
              v-if="fourForm.imgApp"
              :src="fourForm.imgApp"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="FourBlockVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveFourList">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="配置"
      :visible.sync="TopbarVisibleWR"
      width="30%"
      :before-close="handleClose3"
    >
      <el-form
        :model="WRForm"
        :rules="WRRule"
        ref="WRForm"
        label-width="100px"
      >
        <el-form-item label="title" prop="title">
          <el-input v-model="WRForm.title"></el-input>
        </el-form-item>
        <el-form-item label="desc" prop="desc">
          <el-input v-model="WRForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="model" prop="model">
          <el-input v-model="WRForm.model"></el-input>
        </el-form-item>
        <el-form-item label="导航图片" prop="img">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessWR1"
          >
            <img
              v-if="WRForm.img"
              :src="WRForm.img"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="path" prop="path">
          <el-input disabled v-model="WRForm.path"></el-input>
        </el-form-item>
        <el-form-item label="pathTitle" prop="pathTitle">
          <el-input v-model="WRForm.pathTitle"></el-input>
        </el-form-item>
        <el-form-item label="pathSubtitle" prop="pathSubtitle">
          <el-input v-model="WRForm.pathSubtitle"></el-input>
        </el-form-item>
        <el-form-item label="Web产品图片" prop="pathImgWeb">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessWR2"
          >
            <img
              v-if="WRForm.pathImgWeb"
              :src="WRForm.pathImgWeb"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="App产品图片" prop="pathImgApp">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessWR3"
          >
            <img
              v-if="WRForm.pathImgApp"
              :src="WRForm.pathImgApp"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="FourBlockVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveWR">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="配置"
      :visible.sync="TopbarVisibleGZ"
      width="30%"
      :before-close="handleClose4"
    >
      <el-form
        :model="GZForm"
        :rules="WRRule"
        ref="GZForm"
        label-width="100px"
      >
        <el-form-item label="title" prop="title">
          <el-input v-model="GZForm.title"></el-input>
        </el-form-item>
        <el-form-item label="desc" prop="desc">
          <el-input v-model="GZForm.desc"></el-input>
        </el-form-item>
        <el-form-item label="model" prop="model">
          <el-input v-model="GZForm.model"></el-input>
        </el-form-item>
        <el-form-item label="导航图片" prop="img">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessGZ1"
          >
            <img
              v-if="GZForm.img"
              :src="GZForm.img"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="path" prop="path">
          <el-input disabled v-model="GZForm.path"></el-input>
        </el-form-item>
        <el-form-item label="pathTitle" prop="pathTitle">
          <el-input v-model="GZForm.pathTitle"></el-input>
        </el-form-item>
        <el-form-item label="pathSubtitle" prop="pathSubtitle">
          <el-input v-model="GZForm.pathSubtitle"></el-input>
        </el-form-item>
        <el-form-item label="Web产品图片" prop="pathImgWeb">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessGZ2"
          >
            <img
              v-if="GZForm.pathImgWeb"
              :src="GZForm.pathImgWeb"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="App产品图片" prop="pathImgApp">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessGZ3"
          >
            <img
              v-if="GZForm.pathImgApp"
              :src="GZForm.pathImgApp"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TopbarVisibleGZ = false">取 消</el-button>
        <el-button type="primary" @click="saveGZ">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="配置"
      :visible.sync="TopbarVisibleApplication"
      width="30%"
      :before-close="handleClose5"
    >
      <el-form
        :model="ApplicationForm"
        :rules="ApplicationRule"
        ref="ApplicationForm"
        label-width="100px"
      >
        <el-form-item label="title" prop="title">
          <el-input v-model="ApplicationForm.title"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="img">
          <el-upload
            class="avatar-uploader"
            :action="'/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccessApplication"
          >
            <img
              v-if="ApplicationForm.img"
              :src="ApplicationForm.img"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="TopbarVisibleApplication = false">取 消</el-button>
        <el-button type="primary" @click="saveApplication">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { updateUser, getUser } from "../service.js";
export default {
  data() {
    return {
      json: {
        carouselList: [],
        homeFourBlock: [
          {
            id: 1,
            titleCn: '',
            titleEn: '',
            subtitle: '',
            path: '/product?hhy',
            imgWeb: '',
            imgApp: ''
          },
          {
            id: 2,
            titleCn: '',
            titleEn: '',
            subtitle: '',
            path: '/handle',
            imgWeb: '',
            imgApp: ''
          },
          {
            id: 3,
            titleCn: '',
            titleEn: '',
            subtitle: '',
            path: '/product?jqg',
            imgWeb: '',
            imgApp: ''
          },
          {
            id: 4,
            titleCn: '',
            titleEn: '',
            subtitle: '',
            path: '/product?radar',
            imgWeb: '',
            imgApp: ''
          }
        ],
        TopBarWR: [
          {
            title: '',
            desc: '',
            model: '',
            path: '/product?hhy',
            model: '',
            img: '',
            pathImgWeb: '',
            pathImgApp: '',
            pathTitle: '',
            pathSubtitle: '',
          },
          {
            title: '',
            desc: '',
            model: '',
            path: '/product?jqg',
            model: '',
            img: '',
            pathImgWeb: '',
            pathImgApp: '',
            pathTitle: '',
            pathSubtitle: '',
          }
        ],
        TopBarGZ: [
          {
            title: '',
            desc: '',
            model: '',
            path: '/handle',
            model: '',
            img: '',
            pathImgWeb: '',
            pathImgApp: '',
            pathTitle: '',
            pathSubtitle: '',
          },
          {
            title: '',
            desc: '',
            model: '',
            path: '/product?SAR',
            model: '',
            img: '',
            pathImgWeb: '',
            pathImgApp: '',
            pathTitle: '',
            pathSubtitle: '',
          },
          {
            title: '',
            desc: '',
            model: '',
            path: '/product?radar',
            model: '',
            img: '',
            pathImgWeb: '',
            pathImgApp: '',
            pathTitle: '',
            pathSubtitle: '',
          }
        ],
        TopBarApplication: []
      },
      CarouselListWebVisible: false,
      FourBlockVisible: false,
      TopbarVisibleWR: false,
      TopbarVisibleGZ: false,
      TopbarVisibleApplication: false,
      carouselListForm: {
        titleCn: "",
        titleEn: "",
        subtitle: "",
        imgWeb: "",
        imgApp: "",
      },
      fourForm: {
        titleCn: "",
        titleEn: "",
        subtitle: "",
        path: "",
        img: '',
      },
      WRForm: {
        title: '',
        desc: '',
        model: '',
        img: '',
        path: '',
        pathTitle: '',
        pathSubtitle: '',
        pathImgWeb: '',
        pathImgApp: '',
      },
      GZForm: {
        title: '',
        desc: '',
        model: '',
        img: '',
        path: '',
        pathTitle: '',
        pathSubtitle: '',
        pathImgWeb: '',
        pathImgApp: '',
      },
      ApplicationForm: {
        title: '',
        img: '',
      },
      formRule: {
        titleCn: [
          { required: true, message: "请输入titleCn", trigger: "change" },
        ],
        titleEn: [
          { required: true, message: "请输入titleEn", trigger: "change" },
        ],
        subtitle: [
          { required: true, message: "请输入subtitle", trigger: "change" },
        ],
        imgWeb: [{ required: true, message: "请上传图片", trigger: "change" }],
        imgApp: [{ required: true, message: "请上传图片", trigger: "change" }],
      },
      WRRule: {
        title: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        desc: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        model: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        pathTitle: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        pathSubtitle: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        img: [{ required: true, message: "请上传图片", trigger: "change" }],
        pathImgWeb: [{ required: true, message: "请上传图片", trigger: "change" }],
        pathImgApp: [{ required: true, message: "请上传图片", trigger: "change" }],
      },
      ApplicationRule: {
        title: [
          { required: true, message: "请输入", trigger: "change" },
        ],
        img: [{ required: true, message: "请上传图片", trigger: "change" }],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    handleAvatarSuccessApplication(info) {
      this.ApplicationForm.img = info.url;
    },
    handleAvatarSuccessWeb(info) {
      console.log(info)
      this.carouselListForm.imgWeb = info.url;
    },
    handleAvatarSuccessApp(info) {
      this.carouselListForm.imgApp = info.url;
    },
    handleAvatarSuccessFourWeb(info) {
      this.fourForm.imgWeb = info.url;
    },
    handleAvatarSuccessFourApp(info) {
      this.fourForm.imgApp = info.url;
    },
    handleAvatarSuccessWR1(info) {
      this.WRForm.img = info.url;
    },
    handleAvatarSuccessWR2(info) {
      this.WRForm.pathImgWeb = info.url;
    },
    handleAvatarSuccessWR3(info) {
      this.WRForm.pathImgApp = info.url;
    },
    handleAvatarSuccessGZ1(info) {
      this.GZForm.img = info.url;
    },
    handleAvatarSuccessGZ2(info) {
      this.GZForm.pathImgWeb = info.url;
    },
    handleAvatarSuccessGZ3(info) {
      this.GZForm.pathImgApp = info.url;
    },
    getData() {
      getUser().then((res) => {
        if (res.code === 200 && res.data.length) {
          let json = {}
          if (res.data[0].models) {
            json = JSON.parse(res.data[0].models);
          }
          this.json.id = res.data[0]._id;
          if (json.carouselList) {
            this.json.carouselList = json.carouselList;
          }
          if (json.homeFourBlock) {
            this.json.homeFourBlock = json.homeFourBlock;
          }
          if (json.TopBarWR) {
            this.json.TopBarWR = json.TopBarWR;
          }
          if (json.TopBarGZ) {
            this.json.TopBarGZ = json.TopBarGZ;
          }
          if (json.TopBarApplication) {
            this.json.TopBarApplication = json.TopBarApplication;
          }
        }
      });
    },
    setCarouselList() {
      this.type = "add";
      this.CarouselListWebVisible = true;
    },
    addApp() {
      this.Atype = "add";
      this.TopbarVisibleApplication = true;
    },
    saveApplication() {
      this.$refs["ApplicationForm"].validate(async (valid) => {
        if (valid) {
          if (this.Atype === "add") {
            this.json.TopBarApplication.push(this.ApplicationForm);
          } else {
            this.json.TopBarApplication.splice(this.appIndex, 1, this.ApplicationForm);
          }
          // 调保存接口
          let rs = await this.handleModel();
          if (rs === 200) {
            this.$message.success("操作成功");
            this.TopbarVisibleApplication = false;
          }
        }
      });
    },
    saveCarouselList() {
      this.$refs["carousel"].validate(async (valid) => {
        if (valid) {
          if (this.type === "add") {
            this.json.carouselList.push(this.carouselListForm);
          } else {
            this.json.carouselList.splice(this.formIndex, 1, this.carouselListForm);
          }
          // 调保存接口
          let rs = await this.handleModel();
          if (rs === 200) {
            this.$message.success("操作成功");
            this.CarouselListWebVisible = false;
          }
        }
      });
    },
    saveFourList() {
      this.$refs["four"].validate(async (valid) => {
        if (valid) {
          this.json.homeFourBlock.splice(this.fourIndex, 1, this.fourForm);
          // 调保存接口
          let rs = await this.handleModel();
          if (rs === 200) {
            this.$message.success("操作成功");
            this.FourBlockVisible = false;
          }
        }
      });
    },
    handleEditCarousel(index, row, type) {
      this.carouselListForm = JSON.parse(JSON.stringify(row));
      this.CarouselListWebVisible = true;
      this.type = "edit";
      this.cType = type;
      this.formIndex = index
    },
    handleTopBarApplication(index, row) {
      this.ApplicationForm = JSON.parse(JSON.stringify(row));
      this.TopbarVisibleApplication = true;
      this.appIndex = index
    },
    handleEditFour(index, row, type) {
      this.fourForm = JSON.parse(JSON.stringify(row));
      this.FourBlockVisible = true;
      this.fourType = type;
      this.fourIndex = index
    },
    deleteTopBarApplication(i) {
      this.$confirm("此操作将永久删除该, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.json.TopBarApplication.splice(i, 1);
        let rs = await this.handleModel();
        if (rs === 200) {
          this.$message.success("操作成功");
          this.CarouselListWebVisible = false;
        }
      });
    },
    handleDeleteCarousel(i, type) {
      this.$confirm("此操作将永久删除该, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.json.carouselList.splice(i, 1);
        let rs = await this.handleModel();
        console.log(rs);
        if (rs === 200) {
          this.$message.success("操作成功");
          this.CarouselListWebVisible = false;
        }
      });
    },
    handleClose() {
      this.$refs["carousel"].resetFields();
      this.CarouselListWebVisible = false;
    },
    handleClose2() {
      this.$refs["four"].resetFields();
      this.FourBlockVisible = false;
    },
    handleClose3() {
      this.$refs["WRForm"].resetFields();
      this.TopbarVisibleWR = false;
    },
    handleClose4() {
      this.$refs["GZForm"].resetFields();
      this.TopbarVisibleGZ = false;
    },
    handleClose5() {
      this.$refs["ApplicationForm"].resetFields();
      this.TopbarVisibleApplication = false;
    },
    handleModel() {
      return new Promise((resolve) => {
        console.log(this.json);
        let params = {
          models: JSON.stringify(this.json),
          username: 'admin',
          password: '123456'
        };
        updateUser(this.json.id, params).then((res) => {
            console.log(res);
            resolve(res.code);
          });
      });
    },
    handleTopBarWR(index, row) {
      this.WRForm = JSON.parse(JSON.stringify(row));
      this.TopbarVisibleWR = true;
      this.WRIndex = index
    },
    handleTopBarGZ(index, row) {
      this.GZForm = JSON.parse(JSON.stringify(row));
      this.TopbarVisibleGZ = true;
      this.GZIndex = index
    },
    saveWR() {
      this.$refs["WRForm"].validate(async (valid) => {
        if (valid) {
          this.json.TopBarWR.splice(this.WRIndex, 1, this.WRForm);
          // 调保存接口
          let rs = await this.handleModel();
          if (rs === 200) {
            this.$message.success("操作成功");
            this.TopbarVisibleWR = false;
          }
        }
      });
    },
    saveGZ() {
      this.$refs["GZForm"].validate(async (valid) => {
        if (valid) {
          this.json.TopBarGZ.splice(this.GZIndex, 1, this.GZForm);
          // 调保存接口
          let rs = await this.handleModel();
          if (rs === 200) {
            this.$message.success("操作成功");
            this.TopbarVisibleGZ = false;
          }
        }
      });
    }
  },
};
</script>

<style scoped>
h2 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

i {
  margin-left: 10px;
  cursor: pointer;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 1px dashed gray;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
